<template>
  <div class="contaniner" style="width:100%;align-items:center">
    <!--  -->
    <el-row>
      <el-col :span="8" v-for="(item, index) in courses" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <!-- <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
          /> -->
          <img
            src="@/assets/default_course_img.jpg"
            class="image"
          />
          <div class="info">
            <span class="title">{{ item.title | ellipsis(10) }}</span>
            <div class="classAddress">
              <span>主讲教师：</span>
              <span>{{ item.name }}</span>
            </div>
            <el-button
              type="text"
              class="button"
              @click="viewCourseDetail(item)"
              >查看课程详情</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="courseInfo.length"
        style="text-align: center; margin-top:10px"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  filters: {
    // 过滤器用来规定字符长度
    ellipsis(value, lengthLimit) {
      if (!value) return "";
      // let lengthLimit = 50;
      if (value.length > lengthLimit) {
        return value.slice(0, lengthLimit) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      courseInfo: [],
      currentPage: 1, // 当前页数
      pageSize: 6, // 表的行数
      courses: [], // 当前页面的所有数据项
    };
  },
  methods: {
    // 在这里实现跳转
    viewCourseDetail(item) {
      this.$store.commit("saveSections", item);
      this.$router.push({
        path: "/student/courseManagement",
      });
    },
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.courses = this.courseInfo.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  mounted() {
    // 挂载时载入当前学生数，看情况要不要
    this.handleCurrentChange(this.currentPage);
  },
};
</script>

<style scoped>
.image {
  width: 136px;
  height: 120px;
  display: block;
  float: left;
}

.el-col-8 {
  width: 340px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 15px;
}

.el-card {
  height: 120px;
  width: 340px;
}

.title {
  display: inline-block;
  margin-left: 20px;
  margin-top: 15px;
  color: #666666;
  font-size: 18px;
  font-family: "微软雅黑";
  font-weight: 400;
  line-height: 29px;
}

.info {
  /* display: -webkit-box;
  -webkit-box-orient: vertical; */
  float: right;
  width: 204px;
  height: 120px;
  padding: 0;
}

.classAddress {
  margin-top: 7px;
  margin-left: 20px;
  color: #999999;
  font-size: 12px;
}

.classTime {
  margin-top: 3px;
  margin-left: 20px;
  color: #999999;
  font-size: 12px;
}

.el-button {
  margin-left: 60px;
  font-size: 14px;
  color: #5ca3ed;
  height: 30px;
  margin-top: 10px;
}
</style>
